<template>
    <div class="isDialog">
        <div>
            <el-form :model="formData" label-width="90px" :inline="true">
                <el-row :gutter="24">
                    <el-col :span="6" :offset="0" v-if="formData.type === '收入' || formData.type === '支出'">
                        <el-form-item label="往来单位：">
                            {{ formData.organName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0" v-if="formData.type === '付款' || formData.type === '收款'">
                        <template v-if="formData.type === '付款'">
                            <el-form-item label="供应商：">
                                {{ formData.organName }}
                            </el-form-item>
                        </template>
                        <template v-else>
                            <el-form-item label="客户：">
                                {{ formData.organName }}
                            </el-form-item>
                        </template>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item label="财务人员：">
                            {{ formData.personName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item label="单据日期：">
                            {{ formData.billTime }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="0">
                        <el-form-item label="单据编号：">
                            {{ formData.billNo }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div>
            <el-table :data="formData.tables" border stripe>
                <template v-if="formData.type === '转账' || formData.type === '收入'
                    || formData.type === '支出' || formData.type === '收预付款'">

                    <el-table-column v-if="formData.type === '收入'" prop="name" label="收入项目" />
                    <el-table-column v-else-if="formData.type === '支出'" prop="name" label="快递费" />
                    <el-table-column v-else prop="itemName" label="账户名称" />
                    <el-table-column prop="money" label="金额" />
                    <el-table-column prop="remark" label="备注" />
                </template>
                <template v-else-if="formData.type === '付款'">
                    <el-table-column prop="number" label="采购单据编号" />
                    <el-table-column prop="needDebt" label="应付欠款" />
                    <el-table-column prop="finishDebt" label="已付欠款" />
                    <el-table-column prop="eachAmount" label="本次付款" />
                    <el-table-column prop="remark" label="备注" />
                </template>
                <template v-else-if="formData.type === '收款'">
                    <el-table-column prop="number" label="销售单据编号" />
                    <el-table-column prop="needDebt" label="应收欠款" />
                    <el-table-column prop="finishDebt" label="已收欠款" />
                    <el-table-column prop="eachAmount" label="本次收款" />
                    <el-table-column prop="remark" label="备注" />
                </template>
            </el-table>
        </div>
        <div style="margin-top: 30px;">
            <el-form :model="formData" label-width="90px" :inline="true">
                <template v-if="formData.type === '转账' || formData.type === '收入'
                    || formData.type === '支出' || formData.type === '收预付款'">

                    <template v-if="formData.type === '收入' && formData.type !== '支出'">
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item :label="formData.type + '账户：'">
                                    {{ formData.accountName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item :label="formData.type + '金额：'">
                                    {{ Math.abs(formData.changeAmount) }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>

                    <template v-else-if="formData.type === '收预付款'">
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="合计金额：">
                                    {{ formData.totalPrice }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="收款金额：">
                                    {{ formData.changeAmount }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>

                    <template v-else-if="formData.type === '转账'">
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="付款账户：">
                                    {{ formData.accountName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="实付金额：">
                                    {{ Math.abs(formData.changeAmount) }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </template>
                </template>

                <template v-else>
                    <el-row :gutter="24">
                        <template v-if="formData.type === '付款'">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="付款账户：">
                                    {{ formData.accountName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="合计付款：">
                                    {{ Math.abs(formData.totalPayment) }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="优惠金额：">
                                    {{ formData.discountMoney }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="实际付款：">
                                    {{ Math.abs(formData.changeAmount) }}
                                </el-form-item>
                            </el-col>
                        </template>


                        <template v-else>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="收款账户：">
                                    {{ formData.accountName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="合计收款：">
                                    {{ Math.abs(formData.totalPayment) }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="优惠金额：">
                                    {{ formData.discountMoney }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="实际收款：">
                                    {{ Math.abs(formData.changeAmount) }}
                                </el-form-item>
                            </el-col>
                        </template>


                    </el-row>
                </template>
            </el-form>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 50px;">
            <el-button type="default" @click="close">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import { getAccountHeadDetail } from '@/components/material_bill_detail/js/Stoke'

const props = defineProps(['accountHeadNumber']);
const emits = defineEmits(['close'])

let formData = ref({})
const getData = async () => {
    await getAccountHeadDetail(props.accountHeadNumber.number, props.accountHeadNumber.subType).then(resp => {
        console.log(resp)
        formData.value = resp
    })
}

const close = () => {
    emits('close')
}

onMounted(() => {
    getData()
})
</script>

<style scoped></style>
